<template>
    <div class="box">
        <div class="imgUpLoad">
            <h1>上传实拍图</h1>
            <div class="checkerboard">
                <div v-for="i in 12">
                    <div v-for="j in 12">
                    </div>
                </div>

            </div>
        </div>
        <div class="imgshow">
            <div>
            </div>
        </div>
        <div class="tools">
            <div class="tool1"></div>
            <div class="tool2"></div>
            <div class="tool3"></div>
            <div class="tool4"></div>
        </div>

    </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;

    .common {
        background-color: #504656;
        display: flex;
        flex-direction: column;
        border-radius: 10px;

    }

    .imgUpLoad {
        @extend .common;
        flex-basis: 15%;
        margin: 0 10px;
        align-items: center;

        h1 {
            color: white
        }

        .checkerboard {
            $black-color: #18181A;
            $gray-color: #363636;

            height: 120px;
            width: 120px;

            border: {
                style: solid;
                width: 1px;
                color: $black-color;
                radius: 10px;
            }

            .a {
                width: 100%;
                height: 10px;
                display: flex;
                flex-direction: column;
                justify-content: start;
                flex-wrap: wrap;
            }

            .b {
                display: flex;
                flex-direction: row;
                width: 10px;
                height: 10px;
                margin: 0;
            }

            :nth-child(2n) {
                @extend .a;

                div {
                    @extend .b;
                    background-color: $black-color;
                }

                :nth-child(2n+1) {
                    background-color: $gray-color;
                }
            }

            :nth-child(2n+1) {
                @extend .a;

                div {
                    @extend .b;
                    background-color: $gray-color;
                }

                :nth-child(2n+1) {
                    background-color: $black-color;
                }
            }
        }

    }

    .imgshow {
        @extend .common;
        flex-basis: 60%;
        margin-right: 10px;
        padding: 10px;
        div {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            
            border: {
                style: dashed;
                width: 3px;
                color: rgb(101, 87, 114);
                radius: 10px;
            }
        }
    }

    .tools {
        @extend .common;
        flex-basis: 25%;
        justify-content: flex-start;
        padding: 0 10px;
       

        div{
            background-color: #ff0000;
            width: 100%;
            height: 50px;//需要删除
            margin-bottom: 10px;
            display: flex;
        }

        .tool1{
            background-color: #00fbff;
            border-radius: 10px 10px 0 0 ;
        }

        .tool2{
            background-color: #00fbff;
        }

        .tool3{
            background-color: #00fbff;
        }

        .tool4{
            background-color: #00fbff;
        }

    }

}
</style>